<template>
  <view class="homePage">
    <div class="topBox">
      <!--         confirm-type="search" -->
      <!-- placeholder-class="iconsousuo iconfont input-placeholder" -->
      <div class="search">
        <i class="iconfont iconsousuo"></i>
        <input
          class="uni-input"
          confirm-type="search"
          placeholder-style="color:#999999;font-size:24rpx;padding-left:0rpx;box-sizing:border-box;"
          placeholder="请输入关键词"
          cursor="20rpx"
        />
      </div>
      <!-- 扫码 -->
      <i class="iconfont iconjia" @click="moveCode"></i>
    </div>
    <!-- 扫码 -->
    <div class="saoCode" v-show="flag">
      <i class="iconfont iconsaoma" @click="openCamera">
        <span>扫一扫</span>
      </i>
      <i class="iconfont iconico" @click="toErCode">
        <span>入场码</span>
      </i>
    </div>
    <!-- 内容 -->
    <view class="itemBox">
      <tab
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        style-type="text"
        active-color="#fff"
      ></tab>
      <view class="item">
        <view v-show="current === 0">
          <div class="Box Box0">
            <div class="topTile">
              <div class="title" v-for="(item,index) in titleList" :key="index">
              <div class="text">{{item}}</div>
              <div class="type">置顶</div>
            </div>
            </div>
            <div class="itemList" v-for="(item,index) in itemBoxList" :key="index">
              <div class="title">
                <span class="text">{{item.title}}</span>
                <span class="follow">关注</span>
              </div>
              <div class="image">
                <img :src="item.imgUrl" alt="">
              </div>
            </div>
            <div class="itemList list2" v-for="(item,index) in itemBoxList2" :key="index">
              <div class="title">
                <span class="text">{{item.title}}</span>
                <span class="follow">关注</span>
              </div>
              <div class="image">
                <img :src="item.imgUrl1" alt="">
                <img :src="item.imgUrl2" alt="">
                <img :src="item.imgUrl3" alt="">
              </div>
            </div>
            <!-- 精彩直播 -->
            <div class="live" v-for="(item,index) in liveList" :key="index">
              <div class="title">{{item.title}}</div>
              <div class="image">
                <div class="box" v-for="(item,index) in item.img" :key="index">
                  <img :src="item.imgUrl" alt="">
                  <div class="text">{{item.text}}</div>
                </div>
              </div>
            </div>
            <div class="logoBox1 logoBox">
              <div class="logo">
                <img mode="widthFix" src="http://124.70.27.33/xcx/one-logo.png" alt="">
              </div>
              <div class="middle">
                <div class="title">北京精雕科技集团</div>
                <div class="text">一家专注于数控机床研发和制造...</div>
              </div>
                <div class="follow">关注</div>
            </div>
            <div class="logoBox2 logoBox">
              <div class="logo">
                <img mode="widthFix" src="http://124.70.27.33/xcx/logo-two.png" alt="">
              </div>
              <div class="middle">
                <div class="title">上海机床厂有限公司</div>
                <div class="text">中国最大的精密磨床制造业...</div>
              </div>
                <div class="follow">关注</div>
            </div>
            <div class="textBox">
              <div class="text">瑞士紧固件商Bossard进驻中科园区</div>
              <div class="follow">关注</div>
            </div>
            <div class="textBox">
              <div class="text">传动界的部件，没有它，精密设备玩不转</div>
              <div class="follow">关注</div>
            </div>
          </div>
          
        </view>
        <view v-show="current === 1">
          <div class="Box Box1">
            <img src="http://124.70.27.33/xcx/null.png" />
          </div>
          
        </view>
        <view v-show="current === 2">
          <div class="Box Box2">
            <img src="http://124.70.27.33/xcx/null.png" />
          </div>
          
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import tab from "@/components/tab";
export default {
  name: "",
  components: {
    tab
  },
  data() {
    return {
      liveList:[
        {
          title:"精彩直播",
          img:[
            {
              imgUrl:"http://124.70.27.33/xcx/img-seven.png",
              text:"油机工业：全面进军..."
            },
            {
              imgUrl:"http://124.70.27.33/xcx/img-seven.png",
              text:"硕方精密重磅亮相..."
            },
            {
              imgUrl:"http://124.70.27.33/xcx/img-seven.png",
              text:"硕方精密重磅亮相..."
            },
          ],
        }
      ],
      itemBoxList:[
        {
          title:"中井兴机器人亮相CME2020 助力智能制造",
          imgUrl:"http://124.70.27.33/xcx/img-one.png"
        },
        {
          title:"中井兴机器人亮相CME2020 助力智能制造",
          imgUrl:"http://124.70.27.33/xcx/img-two.png"
        },
      ],
      itemBoxList2:[
        {
          title:"北京精雕的新产品JDGR400T",
          imgUrl1:"http://124.70.27.33/xcx/img-three.png",
          imgUrl2:"http://124.70.27.33/xcx/img-three.png",
          imgUrl3:"http://124.70.27.33/xcx/img-three.png"
        },
        {
          title:"秦川机床的新产品JDPGT600",
          imgUrl1:"http://124.70.27.33/xcx/img-four.png",
          imgUrl2:"http://124.70.27.33/xcx/img-four.png",
          imgUrl3:"http://124.70.27.33/xcx/img-four.png"
        },
      ],
      titleList:[
        "苏州吉恒纳米科技有限公司亮相CME","2019IIE苏州工业智能展盛大开幕"
      ],
      items: ["机床展", "推荐", "远程运维"],
      current: 0,
      flag:false
    };
  },
  created() {},
  methods: {
    onClickItem(index) {
      if (this.current !== index.currentIndex) {
        this.current = index.currentIndex;
      }
    },
    moveCode(){
      this.flag=!this.flag
    },
    toErCode() {
      uni.navigateTo({ url: "../ErCode/ErCode" });
    },
    openCamera() {
      // 只允许通过相机扫码
      uni.scanCode({
        onlyFromCamera: true,
        success: function(res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
.homePage {
  width: 750rpx;
  .topBox {
    width: 100%;
    margin-top: 20rpx;
    padding-left: 28rpx;
    display: flex;
    .search{
    width:550rpx;
    display: flex;
    background:rgba(241,241,241,1);
    border-radius:30rpx;
    box-sizing: border-box;
    i{
      font-size: 30rpx;
      line-height:60rpx;
      margin: 0 15rpx;
      color: #999999;
    }
    input{
      width:530rpx;
      height:60rpx;
      font-size: 30rpx;
      box-sizing: border-box; 
    }
     
  }
    i {
      cursor: pointer;
      line-height: 60rpx;
      font-size: 44rpx;
      margin-left: 95rpx;
      color: #666666;
    }
  }
  .saoCode {
    width: 230rpx;
    margin-top: 15rpx;
    margin-right: 30rpx;
    // border: 1px solid red;
    background-color: #666666;
    border-radius: 6rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    float: right;
    // z-index: 1000;
    position: absolute;
    right: 0;
    // border: 1px solid #f60;
    i {
      line-height: 80rpx;
      text-align: center;
      color: #f1f1f1;
      span {
        margin-left: 15rpx;
      }
    }
  }
  .saoCode::after {
    position: absolute;
    top: -10rpx;
    right: 20rpx;
    padding: 12rpx;
    border: inherit;
    border-left: none;
    border-top: none;
    content: "";
    background: inherit;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(225deg);
  }
  //   内容盒子
  .itemBox{
    padding: 0 30rpx;
    padding-top: 10rpx;
    box-sizing: border-box;
    .item{
      // border: 1px solid #000;
      padding-bottom: 15rpx;
      .Box{
        .topTile{
          padding-top: 30rpx;
          border-top: 1px solid #eeeeee;
          z-index: 1000;
          .title{
            padding-bottom: 30rpx;
            .text{
              font-size:36rpx;
              font-weight:bold;
              margin-bottom: 15rpx;
            }
            .type{
              font-weight:bold;
              color: #004CB3;
              font-size: 24rpx;
            }
          }
        }
        
        .itemList{
          padding-bottom: 30rpx;
          border-top: 1px solid #eeeeee;
          .title{
            height: 80rpx;
            line-height: 80rpx;
            // border: 1px solid red;
            .text{
              font-size: 30rpx;
              line-height: 80rpx;
              color: #333333;
              font-weight:bold;
            }
            .follow{
              float: right;
              margin: auto;
              margin-top: 30rpx;
              padding: 0 20rpx;
              height: 30rpx;
              background:rgba(244,124,0,1);
              border-radius:15px;
              font-size: 18rpx;
              color: #ffffff;
              font-weight: bold;
              line-height: 30rpx;
              text-align: center;
            }
          }
          .image{
            width: 690rpx;
            height: 397rpx;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .list2{
          .image{
            bottom: 1px solid red;
            // width: 690rpx;
            height: 200rpx;
            display: flex;
            img{
              flex: 1;
              margin: auto;
              width: 200rpx;
              height: 194rpx;
            }
            
          }
        }
        .live{
          border-top: 10rpx solid #eeeeee;
          .title{
            height: 80rpx;
            font-size: 30rpx;
              line-height: 80rpx;
              color: #333333;
              font-weight:bold;
          }
          .image{
            overflow-x: scroll;
            overflow-y: hidden;
            display: flex;
            .box{
              display: inline-block;
              width: 300rpx;
              margin-right: 30rpx;
              img{
                width: 100%;
                height: 170rpx;
              }
              .text{
                text-align: center;
                width: 300rpx;
                font-size: 24rpx;
                height: 60rpx;
                line-height: 60rpx;
              }
            }
          }
        }
        .logoBox{
          // width: 100%;
          display: flex;
          padding: 30rpx 0;
          border-bottom: 1px solid #eeeeee;
          .logo{
            width: 70rpx;
            img{
              width: 100%;
            }
          }
          .middle{
            width: 520rpx;
            margin-left: 30rpx;
            .title{
              font-size: 30rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow:ellipsis;
            }
            .text{
              margin-top: 20rpx;
              font-size: 24rpx;
              color: #666;
              overflow: hidden;
              white-space: nowrap;
              text-overflow:ellipsis;
            }
            .follow{
              // float: right;
              position: absolute;
              right: 0;
              // margin-top: ;
              // display: inline-block;

                  // margin-top: 30rpx;
            }

          }
        }
        .logoBox1{
          border-top: 10rpx solid #eeeeee;
        }
        .textBox{
          width: 100%;
          padding: 30rpx 0;
          border-bottom: 1px solid #eeeeee;
          display: flex;
          .text{
            width: 620rpx;
            font-size: 30rpx;
            font-weight:bold;
            color:rgba(51,51,51,1);
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis;
          }
          .follow{
            margin: auto 0;
          }
        }
        div:nth-last-child(1){
          border: none;
        }
      }
      
    }
  }
  .follow{
    // width: 70rpx;
    padding: 0 20rpx;
    height: 30rpx;
    background:rgba(244,124,0,1);
    border-radius:15px;
    font-size: 18rpx;
    color: #ffffff;
    font-weight: bold;
    line-height: 30rpx;
    text-align: center;
  }
}
/deep/ .segmented-control__text.data-v-4ca2a42a::after {
  border-bottom: 1px solid red;
}
.Box1,.Box2{
  width: 750rpx;
  height: 100vh;
  img{
    width: 264rpx;
    height: 311rpx;
    margin: auto;
    margin-left: 243rpx;
    margin-top: 200rpx;
  }
}
</style>
